<!DOCTYPE HTML>
<html>
<head>
    <title>店铺审核管理</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
    <script src="/scripts/jquery.min.js"></script>
    <script src="/scripts/boot.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/scripts/miniui/themes/default/miniui.css">
    <link rel="stylesheet" href="/scripts/miniui/themes/icons.css">
    <link rel="stylesheet" href="/scripts/miniui/themes/bootstrap/skin.css">
    <link rel="stylesheet" href="/editor/common.css">
    <script src="/scripts/miniui/miniui.js"></script>
</head>
<body  style="padding: 0;width: 100%;height: 97%">
<div style="width:99%;height: 97%;">
    <div id="outImg">
        <img id="imgId" src="" alt="" onclick="smallImg()">
    </div>
    <div style="padding: 5px">
        <span>电话：</span><input class="mini-textbox" type="text" id="phoneNum"/>
        <span>建议类型：</span><input class="mini-combobox" data="typeStatus" type="text" id="type"/>
        <span>处理状态：</span><input class="mini-combobox" data="sugStatus" type="text" id="sugStatus"/>
        <a class="mini-button" iconCls="icon-search" onclick="search()">查找</a>
    </div>
    <div id="datagrid1" class="mini-datagrid" style="width:99%;height: 97%;"
         url="/getdata/suggestionList" idField="id" allowResize="true" onshowrowdetail="onShowRowDetail"
         sizeList="[20,30,50,100]" pageSize="20">
        <div property="columns">
            <div type="expandcolumn" >#</div>
            <div field="objectId" width="90" align="center" headerAlign="center">建议Id</div>
            <div field="phoneNum" width="90" align="center" headerAlign="center">电话号码</div>
            <div field="type" width="90" renderer="typeRenderer" align="center" headerAlign="center">建议类型</div>
            <div field="status" renderer="statusRenderer"  width="90" align="center" headerAlign="center">处理状态</div>
            <div name="action" width="40" headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;">操作</div>
            <div field="picArr"  width="90" align="center" headerAlign="center">问题图片</div>
            <div field="createdAt" width="60"  align="center" headerAlign="center">创建日期</div>
            <div field="updatedAt" width="60"  align="center" headerAlign="center">更新日期</div>
        </div>
    </div>
    <div id="editForm1" style="display:none;">
        <div  class="mini-tabs" style="width:100%;" activeIndex="0">
            <div title="建议内容">
                <input class="mini-hidden" name="objectId"/>
                <table style="width:100%;">
                    <tr style="height: 50px">
                        <td>意见内容：<textarea style="width: 85%; height: 200px;" name="content" class="mini-textarea"></textarea></td>
                    </tr>
                </table>
            </div>
        </div>
        <div style="text-align:right;padding-top:5px;padding-right: 10px" colspan="6">
            <a class="Update_Button" href="javascript:updateRow();">提交</a>
            <a class="Cancel_Button" href="javascript:cancelRow();">取消</a>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    typeStatus = [{id:1,text:'功能异常'},{id:2,text:'体验问题'},{id:3,text:'新功能建议'},{id:4,text:'其他'},{id:"",text:'全部'}];
    sugStatus = [{id:1,text:'解决'},{id:2,text:'处理中'},{id:0,text:'未处理'},{id:"",text:"全部"}];
    mini.parse();
    var grid = mini.get("datagrid1");
    var editForm = document.getElementById("editForm1");
    grid.reload();
    grid.on("drawcell", function (e) {
        var value = e.value;
        var column = e.column;
        if (column.field == "delUserAvatar") {
            if(value) {
                e.cellHtml = '<img class="bigImg" onclick="bigImgCode()" src="' + value + '?imageMogr2/thumbnail/640x/format/jpg/interlace/1/auto-orient" width="30" height="30" alt="图片">';
            }else{
                e.cellHtml = '<img class="bigImg" onclick="bigImgCode()"  src="http://7xiuo5.com1.z0.glb.clouddn.com/fgImage.png?imageMogr2/auto-orient/thumbnail/!100x100r/gravity/Center/crop/100x100/quality/80/auto-orient" width="30" height="30" alt="图片">';
            }
        }
        if (column.field == "picArr") {
            if(value!="") {
                e.cellHtml = imageArr(value);
            }else{
                e.cellHtml = '<img class="bigImg" onclick="bigImg()"  src="http://7xiuo5.com1.z0.glb.clouddn.com/fgImage.png?imageMogr2/auto-orient/thumbnail/!100x100r/gravity/Center/crop/100x100/quality/80/auto-orient" width="30" height="30" alt="图片">';
            }
        }
    });
    function typeRenderer(e) {
        var value = e.value;
        if (value==1) {
            return (value, '功能异常')
        }else if(value==2){
            return (value, '体验问题')
        }else if(value==3){
            return (value, '新功能建议')
        }else if(value==4){
            return (value,'其他')
        }else{
            return value
        }
    }
    function statusRenderer(e) {
        var value = e.value;
        if (value==1) {
            return (value, '解决')
        }else if(value==0){
            return (value, '未处理')
        }else if(value==2){
            return (value, '处理中')
        }
    }
    function imageArr(picArr) {
        var imgUrl = "";
        for (var i=0;i<picArr.length;i++){
            imgUrl+='<img class="bigImg" style="margin-right: 5px" onclick="bigImg(this)" src="' + picArr[i] + '?imageMogr2/thumbnail/640x/format/jpg/interlace/1/auto-orient" width="30" height="30" alt="图片">'
        }
        return imgUrl;
    }
    function search() {
        var phoneNum = mini.get("phoneNum").getValue();
        var type = mini.get("type").getValue();
        var status = mini.get("sugStatus").getValue();
        grid.load({
            phoneNum: phoneNum,
            type:type,
            status:status,
        });
    }
    $("#saveUserOId,#saveUserName,#delUserName,#delUserOId").bind("keydown", function (e) {
        if (e.keyCode == 13) {
            search();
        }
    });

    function bigImg(imageUrl) {
        var row = grid.getSelected();
        if (row) {
            var path = imageUrl.src;
            $("#imgId").attr('src', path);
            $("#outImg").css('display','block');
        }
    }
    function bigImgCode() {
        var row = grid.getSelected();
        if (row) {
            var path = row.delUserAvatar;
            $("#imgId").attr('src', path);
            $("#outImg").css('display','block');
        }
    }
    function smallImg() {
        $("#outImg").css('display','none');
    }


    function onShowRowDetail(e) {
        var row = e.record;
        console.log()
        var td = grid.getRowDetailCellEl(row);
        td.appendChild(editForm);
        editForm.style.display = "";
        //表单加载员工信息
        var form = new mini.Form("editForm1");
        mini.getbyName("content").setValue(row.content);
    };
    function onActionRenderer(e) {
        var grid = e.sender;
        var record = e.record;
        var uid = record._uid;
        var status = record.status;
        var rowIndex = e.rowIndex;
        var s;
        if (status == 0){
            s = '<a class="Edit_Button" href="javascript:permit(\''+1+'\',\'' + uid + '\')">解决</a> '
                + '<a class="Delete_Button" href="javascript:permit(\''+2+'\',\'' + uid + '\')">处理中</a> ';
        }else if (status==2){
            s = '<a class="Edit_Button" href="javascript:permit(\''+1+'\',\'' + uid + '\')">解决</a> '
        }
        return s;
    };

    function permit(status,row_uid) {
        var row = grid.getRowByUID(row_uid);
        if (row) {
            var data = {};
            var objectId = row.objectId;
            data.objectId = objectId;
            data.status = status;
            $.ajax({
                url: "/getdata/suggestion/status",
                type: 'post',
                data: data,
                cache: false,
                success: function (res) {
                    if(res==1){
                        grid.reload();
                    }else{
                        alert("出现错误");
                    }

                },
                error: function (error) {
                    console.log(error)
                }
            });
        }
    };
</script>
</html>